<template>
  <el-drawer
    :model-value="state.dialogFormVisible"
    :title="t('role.roleInfo')"
    :before-close="handleClose"
    size="40%"
    direction="rtl"
    :destroy-on-close="true"
  >
    <template #default>
      <el-descriptions :column="2" :border="true">
        <el-descriptions-item
          :label="t('role.roleName')"
          label-align="right"
          :span="2"
          >{{ formView.roleName }}</el-descriptions-item
        >
        <el-descriptions-item
          :label="t('role.roleCode')"
          label-align="right"
          width="10%"
        >
          {{ formView.roleCode }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('role.orderIndex')"
          label-align="right"
          width="10%"
        >
          {{ formView.orderIndex }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('role.category')"
          label-align="right"
          :span="2"
        >
          <el-tag size="small"> {{ formView.category }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item
          :label="t('role.description')"
          label-align="right"
          :span="2"
        >
          {{ formView.description }}
        </el-descriptions-item>
      </el-descriptions>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import utils from "../../../utils/utils";
import apiRole from "../api/role";
import { useI18n } from "vue-i18n";
const { t } = useI18n({ useScope: "global" });
// ts 语法，有默认值版本
const props = withDefaults(
  defineProps<{
    title?: string;
  }>(),
  {}
);

const state = reactive({
  dialogFormVisible: false,
});

const formViewOriginal = () => {
  return {
    roleId: "",
    orderIndex: 0,
    roleName: "",
    roleCode: "",
    category: "",
    description: "",
  };
};
const formView = reactive(formViewOriginal());

const handleClose = (submit: boolean) => {
  // console.log(submit);
  state.dialogFormVisible = false;
};

const show = (row: any) => {
  // console.log(row);
  Object.assign(formView, formViewOriginal());

  apiRole
    .getRole(row.roleId)
    .then((response: any) => {
      if (response.data.code == 200) {
        Object.assign(formView, response.data.data);
      }
    })
    .catch((err: any) => {
      utils.errorNotification(t("common.submitException"), err);
    });

  state.dialogFormVisible = true;
};

defineExpose({
  show,
});
</script>
